import React, { useState, useContext } from "react";
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  Platform,
  StatusBar,
  FlatList,
} from "react-native";
import { AntDesign } from "@expo/vector-icons";
import { Feather } from "@expo/vector-icons";
import MaterialCard from "../../components/materialCard";
import GoodsCard from "../../components/GoodsCard";
import ComMaterialContext from "../../context/suppiler/comMaterialContext";
import GoodsContext from "../../context/suppiler/goodsContext";

const Separator = () => <View style={styles.itemSeparator} />;

const SearchDetail = ({ navigation, route }) => {
  const { searchText } = route.params;
  const { companyMaterial } = useContext(ComMaterialContext);
  const { goods } = useContext(GoodsContext);
  const [type, setTypes] = useState(0);

  let material = [];
  companyMaterial.map((item) => {
    if (item.category.includes(searchText) || item.type.includes(searchText)) {
      material.push(item);
    }
  });

  // console.log("过滤后的材料为", material);

  let good = [];
  goods.map((item) => {
    if (item.title.includes(searchText) || item.shape.includes(searchText)) {
      good.push(item);
    }
  });
  // console.log("过滤后的商品为", goods);

  return (
    <View style={styles.page}>
      <View style={styles.top}>
        <TouchableOpacity
          style={styles.back}
          onPress={() => {
            navigation.goBack();
          }}
        >
          <AntDesign name="left" size={20} color="#A4A4A4" />
        </TouchableOpacity>

        <View style={styles.searchBar}>
          <View style={styles.searchIcon}>
            <Feather name="search" size={20} color="#A4A4A4" />
          </View>
          <View style={styles.searchInput}>
            <Text style={styles.searchText}>{searchText}</Text>
            <TouchableOpacity
              onPress={() => {
                navigation.goBack();
              }}
            >
              <View style={styles.searchIcon}>
                <AntDesign name="closecircle" size={15} color="#A4A4A4" />
              </View>
            </TouchableOpacity>
          </View>
        </View>
      </View>
      <View style={styles.buttonOption}>
        <TouchableOpacity
          onPress={() => {
            setTypes(0);
          }}
        >
          <View style={type === 0 ? styles.selectedItem : styles.buttonView}>
            <Text style={type === 0 ? styles.selectedText : styles.buttonText}>
              商品
            </Text>
          </View>
        </TouchableOpacity>
        <TouchableOpacity
          onPress={() => {
            setTypes(1);
          }}
        >
          <View style={type === 1 ? styles.selectedItem : styles.buttonView}>
            <Text style={type === 1 ? styles.selectedText : styles.buttonText}>
              材料
            </Text>
          </View>
        </TouchableOpacity>
      </View>
      <View style={styles.context}>
        {type === 0 ? (
          <FlatList
            data={good}
            renderItem={({ item, index }) => {
              return (
                <GoodsCard
                  key={index}
                  index={index}
                  // isMutilDelete={isMutilDelete}
                  // onPressSelect={onPressSelect}
                  // onDelete={onDelete}
                  showData={item}
                  onQuery={() =>
                    navigation.navigate("SuppilerDetail", {
                      itemDetail: item,
                    })
                  }
                />
              );
            }}
            ItemSeparatorComponent={() => <Separator />}
            keyExtractor={(item, index) => index.toString()}
            ListEmptyComponent={() => (
              <Text
                style={{ fontSize: 16, alignSelf: "center", color: "#B3B3B3" }}
              >
                没有符合条件的商品
              </Text>
            )}
          />
        ) : (
          <FlatList
            data={material}
            renderItem={({ item, index }) => {
              return (
                <MaterialCard
                  key={index}
                  index={index}
                  item={item}
                  // isMutilDelete={isMutilDelete}
                  // onPressSelect={onPressSelect}
                />
              );
            }}
            keyExtractor={(item, index) => index.toString()}
            ListEmptyComponent={() => (
              <Text
                style={{ fontSize: 16, alignSelf: "center", color: "#B3B3B3" }}
              >
                没有符合条件的材料
              </Text>
            )}
          />
        )}
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  page: {
    marginTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
    flex: 1,
    backgroundColor: "#fafafa",
  },
  top: {
    flex: 1,

    flexDirection: "row",
    justifyContent: "space-around",
    alignItems: "center",
  },
  back: {
    padding: 5,
  },
  searchBar: {
    height: 38,
    borderRadius: 5,
    alignItems: "center",
    backgroundColor: "#efefef",
    flexDirection: "row", // 水平排布
    flex: 1,
    justifyContent: "space-between",
    paddingLeft: 10,
    marginLeft: 10,
    marginRight: 10,
  },
  searchInput: {
    flex: 1,
    flexDirection: "row",
    alignItems: "center",
  },
  searchText: {
    fontSize: 16,
    color: "#9d9d9d",
    padding: 5,
  },
  searchIcon: {
    marginRight: 10,
  },

  buttonOption: {
    flex: 1,

    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
  },
  buttonView: {
    padding: 5,
    paddingLeft: 20,
    paddingRight: 20,
    borderColor: "#E6E6E6",
    borderWidth: 1,
  },
  buttonText: {
    fontSize: 17,
    color: "#151515",
  },
  context: {
    marginTop: 25,
    flex: 7,
    marginBottom: 70,
  },
  itemSeparator: {
    backgroundColor: "#e4e4e4",
    height: 1,
    width: "90%",
    alignSelf: "center",
  },
  selectedItem: {
    backgroundColor: "#F9be7d",
    padding: 5,
    paddingLeft: 20,
    paddingRight: 20,
    borderColor: "#F9be7d",
    borderWidth: 1,
  },
  selectedText: {
    fontSize: 17,
    color: "#fff",
    fontWeight: "bold",
  },
});

export default SearchDetail;
